<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react</title>
<script src="../../s/react/16.13.1/react.production.min.js"></script>
<script src="../../s/react/16.13.1/react-dom.production.min.js"></script>
<script src="../../s/babel/5.8.38/browser.min.js"></script>
</head>
<body>
	<div id="root"></div>
	<script type="text/babel">
		// 使用 Effect Hook
		// Effect Hook 可以在函数组件中执行副作用操作
		function Example() {
			// 声明一个新的叫做 “count” 的 state 变量 
			const [count, setCount] = React.useState(0);

			// 在 React 更新 DOM 之后运行一些额外的代码
			React.useEffect(() => {
				document.title = `You clicked ${count} times`;
			});

			return (
				<div>
					<p>You clicked {count} times</p>
					<button onClick={() => setCount(count + 1)}>
        				Click me
      				</button>
				</div>
			);
		}
		ReactDOM.render(
			<Example />,
			document.getElementById('root')
		);
    </script>
</body>
</html>